<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font_iconfronts/iconfont.css">
</head>
<body>
    <div id="content1" style="display: none;">
        <div id="header1"></div>
        <h3></h3>
    </div>
    <!-- 头开始 -->
    <header>
        <div class="wrapper header">
            <div class="logo"></div>
                <ul>
                    <li>网易云</li>
                    <li>网易云</li>
                    <li>网易云</li>
                    <li>网易云</li>
                    <li>网易云</li>
                    <li>网易云</li>
                </ul>
                <div>
                    <input type="text" class="text-ipt">
                        <ul class="contentUl"></ul>
                     <!--下拉框隐藏  -->
                    <button class="dl">登录</button>
                </div>
        </div>     
    </header>
    <!-- 导航开始 -->
    <nav>
        <div class="wrapper nav">
           <div></div>  <!-- 三角形 -->
            <ul>
                <li class="active">网易云</li>
                <li>网易云</li>
                <li>网易云</li>
                <li>网易云</li>
                <li>网易云</li>
                <li>网易云</li>
            </ul>
        </div>
    </nav>
    <!-- banner开始 -->
    <section>
        <div class="wrapper banner">
            <img src="img/banner1.jpg" alt="" class="lubotu">
            <ul class="cicrl_dot"> <!-- 圆点    -->
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="left_btn">左按钮</div>
            <div class="right_btn">右按钮</div>
        </div>
    </section>
    <!-- 主体内容 -->
    <div id="main">
        <div class="wrapper main">
            <article class="clear">
                <div>
                    <img src="img/artcile.jpg" alt="" class="main_img">
                </div>
                <div>
                    <p>爱你</p>
                    <p>歌手：<span>陈芳语</span></p>
                    <p>这里是好多好多字这里是好多好多字这里是好多好多字这里是好多好多字</p>
                    <audio controls src="杜轶 - 济南.mp3"></audio>
                    <button class="bf">播放</button>
                </div>
            </article>
            <aside>附加信息</aside>
            <h1>Top</h1>    <!--侧边回到顶部 -->
        </div>
        <!-- 浮动拖拽的控制 -->
        <div id="controlTuo">
            <div class="wrapper controlTuo">
                <div class="jindutiao">
                    <i></i>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
//网页搜索下拉框
var iptObj = document.querySelector(".text-ipt")
var ulObj = document.querySelector(".contentUl")
iptObj.oninput = function(){
    if(this.value=="歌曲"){
       var liObj = document.createElement("li")
       liObj .innerHTML = "歌曲你会不会唱"
       ulObj.appendChild(liObj)
        }else{
            ulObj.innerHTML = ""
        }
        iptObj.onfocus = function(){
        document.querySelector('.contentUl').style.display = 'block'
        }
        iptObj.onblur = function(){
            document.querySelector('.contentUl').style.display = 'none'
        }
}
//登录三件套
var dlObj = document.querySelector(".dl")
var contentObj = document.querySelector("#content1")
var headerObj = document.querySelector("#header1")
dlObj.onclick = function(){
    contentObj.style.display = "block"
}
headerObj.onmousedown = function(evt1){
    var e1 = evt1 || window.evt
    document.onmousemove = function(evt){
        var e = evt || window.evt
        var x = e.pageX-e1.offsetX
        var y = e.pageY- e1.offsetY
        if(x<0){x=0}
            if(y<0){y=0}
            var xMax = (window.innerWidth || document.documentElement.clientWidth)-contentObj.offsetWidth   
            var yMax = (window.innerHeight || document.documentElement.clientHeight)-contentObj.offsetHeight
            if(x>=xMax){x=xMax} 
            if(y>=yMax){y=yMax}
            contentObj.style.left = x +200+ "px"
            contentObj.style.top = y+150 + "px"
    }
    document.onmouseup = function(){
        document.onmousemove = null
    }
}
//轮播图
num = 1
var imgObj = document.querySelector(".lubotu")
function lbtFn(){
    timer = setInterval(function(){
    num++
    if(num>4)num=1
    imgObj.src ="img/banner"+num+".jpg"
},1500)
}
lbtFn()
    var liObjLbt = document.querySelectorAll(".cicrl_dot li")
    liObjLbt.forEach(function(item,index){
        item.onmousemove = function(){
            clearInterval(timer)
            imgObj.src = "img/banner"+(index+1)+".jpg"
            num=index+1
        }
        item.onmouseout = function(){
            lbtFn()
        }
    })
var leftBtn = document.querySelector(".left_btn")
leftBtn .onclick = function(){
    num--
    if(num<1)num=4
    imgObj.src ="img/banner"+num+".jpg"
}
var rightBtn = document.querySelector(".right_btn")
rightBtn .onclick = function(){
    num++
    if(num>4)num=1
    imgObj.src ="img/banner"+num+".jpg"
}
//监控滚动条向上
var h1Obj = document.querySelector("h1")
h1Obj.onclick = function(){
    window.onscroll = function(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
}
    t = setInterval(function(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        scrollTop -= 100
        document.body.scrollTop= document.documentElement.scrollTop  = scrollTop
        if (scrollTop<=0) clearInterval(t)
    },30)
}


//音乐播放
var bfOBJ =document.querySelector(".bf")
var audio =document.querySelector("audio")
var mainImgObj = document.querySelector(".main_img")
bfOBJ . onclick = function(){
    if(audio.paused){
		audio.play();
        bfOBJ.innerHTML='暂停';
		return;
	}
        audio.pause();
        bfOBJ.innerHTML='播放';
}
var iObj = document.querySelector("i")
iObj.onmousedown = function(){
    document.onmousemove = function(evt){
        var e =evt || window.event
        var left = e.pageX-document.querySelector(".jindutiao").offsetLeft
        if (left<0) left = 0
        var maxLeft = document.querySelector('.jindutiao').clientWidth - iObj.offsetWidth
        if (left>maxLeft) left =maxLeft
        audio.currentTime = left
        iObj.style.left = left +"px"
    }
    document.onmouseup = function(){
        document.onmousemove = null
    }
}
</script>
</html>